<script setup>
import { getOrderCommonProduction } from '@/api/orderManagement/common'
import { ElMessage, ElTag, ElText } from 'element-plus'

const tableData = ref([])
const tableRef = ref()
const rowKey = row => row.prodid

const tableColumn = ref([
  { label: '产品编号', prop: 'prodid', minWidth: 160 },
  { label: '产品名称', prop: 'prodname', width: 140 },
  { label: '规格型号', prop: 'prodsize', minWidth: 180 },
  { label: '建议售价', prop: 'price', width: 100 },
  { label: '标准进价', prop: 'stdPrice', width: 100 },
  { label: '单位', prop: 'unit', width: 80 },
  { label: '辅单位', prop: 'fdw', width: 80 },
  { label: '默认仓库', prop: 'warehousename', width: 100 },
  { label: '现有总数', prop: 'kcsl', width: 100 }
])

const params = ref({ prodid: '', prodname: '', prodsize: '' })

const props = defineProps({
  modelValue: {
    type: Boolean
  },
  params: {
    type: Object,
    default: () => {
      return {}
    }
  },
  disableds: {
    type: Array,
    default: () => []
  },
  multiple: { type: Boolean, default: true },
  showQuantity: { type: Boolean, default: true }
})

const emits = defineEmits(['update:modelValue', 'selected'])

const selectedCount = computed(() => {
  let length = 0
  if (tableRef.value) {
    length = tableRef.value?.tableRef.getSelectionRows().length
  }
  return length
})

const loadData = async () => {
  const { data } = await getOrderCommonProduction({ ...params.value, ...props.params })
  tableData.value = data
    .reduce((curr, prev) => {
      const { prodid } = prev
      const has = props.disableds.find(sub => sub === prodid)
      if (!has) curr.push(prev)
      return curr
    }, [])
    .map(item => {
      if (!props.multiple) {
        item.check = false
      }

      return item
    })
}

const confirm = () => {
  let selected = []

  if (props.multiple) {
    selected = tableRef.value?.tableRef.getSelectionRows()
    if (selected.length === 0) {
      ElMessage.warning('请选择产品')
      return
    }
  } else {
    selected = tableData.value.find(item => item.check)
  }

  emits('selected', selected)
  close()
}

const checkOnChange = row => {
  tableData.value.map(item => {
    item.check = false
    return item
  })

  row.check = !row.check
}

const close = () => {
  tableRef.value?.tableRef.clearSelection()
  emits('update:modelValue', false)
}
</script>

<template>
  <el-dialog
    class="order-dialog"
    width="70%"
    :modelValue="$props.modelValue"
    title="选择产品"
    draggable
    @open="loadData"
    @close="close"
  >
    <ps-table
      :data="tableData"
      :tableColumn="tableColumn"
      :row-key="rowKey"
      ref="tableRef"
      class="ps_table_edit"
      :pageSize="10"
      @row-click="checkOnChange"
    >
      <template #tools>
        <el-row align="middle">
          <el-col :span="3">
            <span v-if="$props.multiple">
              <span>已选择</span>
              <span class="selectedCount">{{ selectedCount }}</span>
              <span>条</span>
            </span>
          </el-col>

          <el-col :span="21">
            <el-row :gutter="10" justify="end">
              <el-col :span="4">
                <el-input v-model="params.prodid" clearable placeholder="产品编号" />
              </el-col>

              <el-col :span="4">
                <el-input v-model="params.prodname" clearable placeholder="产品名称" />
              </el-col>

              <el-col :span="4">
                <el-input v-model="params.prodsize" clearable placeholder="规格型号" />
              </el-col>

              <el-col :span="1">
                <el-button type="primary" @click="loadData">载入</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </template>

      <template #header>
        <template v-if="$props.multiple">
          <el-table-column type="selection" width="60" reserve-selection fixed />
        </template>

        <template v-else>
          <el-table-column width="55" align="center">
            <template #default="scope">
              <el-checkbox v-model="scope.row.check" @change="checkOnChange($event, scope.row)" />
            </template>
          </el-table-column>
        </template>

        <el-table-column label="数量" width="80" fixed v-if="$props.showQuantity">
          <template #default="scope">
            <el-input v-model="scope.row.quantity" placeholder="数量" type="number" />
          </template>
        </el-table-column>
      </template>
    </ps-table>

    <template #footer>
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button @click="close">关闭</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.selectedCount {
  color: var(--el-color-primary);
}
</style>
